import { computed, defineComponent, ref } from 'vue';
import Checkbox from './Checkbox.vue';
import Dark from './Dark.vue';
import DenseInline from './DenseInline.vue';
import Disable from './Disable.vue';
import DisableCertainOptions from './DisableCertainOptions.vue';
import Inline from './Inline.vue';
import Label from './Label.vue';
import LabelSlots from './LabelSlots.vue';
import NativeForm from './NativeForm.vue';
import Standard from './Standard.vue';
import Toggle from './Toggle.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Checkbox</h5>
            <Checkbox />
          </div>
          <div class='block-'>
            <h5 class='title'>Dark</h5>
            <Dark />
          </div>
          <div class='block-'>
            <h5 class='title'>DenseInline</h5>
            <DenseInline />
          </div>
          <div class='block-'>
            <h5 class='title'>Disable</h5>
            <Disable />
          </div>
          <div class='block-'>
            <h5 class='title'>DisableCertainOptions</h5>
            <DisableCertainOptions />
          </div>
          <div class='block-'>
            <h5 class='title'>Inline</h5>
            <Inline />
          </div>
          <div class='block-'>
            <h5 class='title'>Label</h5>
            <Label />
          </div>
          <div class='block-'>
            <h5 class='title'>LabelSlots</h5>
            <LabelSlots />
          </div>
          <div class='block-'>
            <h5 class='title'>NativeForm</h5>
            <NativeForm />
          </div>
          <div class='block-'>
            <h5 class='title'>Standard</h5>
            <Standard />
          </div>
          <div class='block-'>
            <h5 class='title'>Toggle</h5>
            <Toggle />
          </div>
        </div>
      );
    };
  },
});
